<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>每日精选</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="jx_area">
    <div class="jx_box">
        <div class="jx_item">
            <div class="ji_box" id="001">
                <img src="111.jpg" alt="" class="ji_pic" />
                <div class="title">
                	<h3>特条|最佳恶搞影片：奥斯卡的诱惑</h3>
					<span>#综艺 / 05'37"</span>
                </div>
            </div>
            <div class="mb_area">
	            <img src="111.jpg" alt="" class="mb_pic"/>
	            <div class="close">&times;</div>
	            <div class="player"><span class="player_pic">►</span></div>
        	</div>
        </div>
        <div class="jx_item">
            <div class="ji_box" id="002">
                <img src="222.jpg" alt="" class="ji_pic"/>
                <div class="title">
                	<h3>就要这份最纯粹的快乐</h3>
					<span>#运动 / 02'33"</span>
                </div>
            </div>
            <div class="mb_area">
	            <img src="222.jpg" alt="" class="mb_pic"/>
	            <div class="close">&times;</div>
	            <div class="player"><span class="player_pic">►</span></div>
        	</div>
        </div>
        <div class="jx_item">
            <div class="ji_box" id="003">
                <img src="333.jpg" alt="" class="ji_pic"/>
                <div class="title">
                	<h3>空气少女的战斗</h3>
					<span>#广告 / 02'07"</span>
                </div>
            </div>
            <div class="mb_area">
	           	<img src="333.jpg" alt="" class="mb_pic"/>
	           	<div class="close">&times;</div>
	           	<div class="player"><span class="player_pic">►</span></div>
	        </div>
        </div>
        <div class="jx_item">
            <div class="ji_box" id="004">
                <img src="444.jpg" alt="" class="ji_pic"/>
                <div class="title">
                	<h3>脑洞打开重口动画：猎犬</h3>
					<span>#动画 / 04'13"</span>
                </div>
            </div>
            <div class="mb_area">
	            <img src="444.jpg" alt="" class="mb_pic"/>
	            <div class="close">&times;</div>
	            <div class="player"><span class="player_pic">►</span></div>
	        </div>
        </div>
        <div class="jx_item">
            <div class="ji_box" id="005">
                <img src="555.jpg" alt="" class="ji_pic"/>
                <div class="title">
                	<h3>5招冬大衣免洗的清洁法</h3>
					<span>#生活 / 01'44"</span>
                </div>
            </div>
             <div class="mb_area">
	            <img src="555.jpg" alt="" class="mb_pic"/>
	            <div class="close">&times;</div>
	            <div class="player"><span class="player_pic">►</span></div>
	        </div>
        </div> 
    </div>
    <div class="fix_jieshao" id="dom">
        <div class="fj_neirong">
            <div class="fj_box">
                <div class="close"></div>
                <div class="pic_area"></div>
                <div class="txt_area">
                    <div class="ta_box">
                        <div class="title"></div>
                        <div class="tt">
                            <span class="type"></span><i class="xiexian"> / </i><span class="time"></span>
                        </div>
                        <div class="dec"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="video_box">
        <video controls="controls" preload="preload" id="video" src="公益广告 天然气安全防护_高清.mp4">
        </video>
    </div>
</div>
</body>
<script src="jquery-3.1.0.min.js"></script>
<script>
    $('.ji_box').click(function(){
    		var vid = $(this).attr("id");
            var setDom = $("#dom");
    		$.ajax({
    			url: "video.json",
    			method: "get",
    			dataType: "json",
    			success: function(result){
                    var data = result.video;
                    var _index;
                    for(var i=0;i<data.length;i++){
                        if(data[i].VideoId == vid){
                            _index = i;
                        }
                    }
    				console.log(data);
                    setDom.find(".title").text(data[_index].title);
                    setDom.find(".type").text(data[_index].type);
                    setDom.find(".time").text(data[_index].time+'"');
                    setDom.find(".dec").text(data[_index].description);
    			}	
    		});
            $('body').addClass('hidden');//弹出层后禁止页面滚动
            var dh = $(this).parent().height();
            var index = $(this).parent().index();
            var _this = this;
            console.log(dh+"..."+index)
            var height= index*dh;
            var scroll= $(window).scrollTop();
            console.log(height+".."+scroll);
            var py= height-scroll;//偏移量
            $(this).siblings(".mb_area").css({
                "top": -py+"px"
            }).addClass('show');
            var yanshi=function(){
                $('.fix_jieshao').addClass('show');
                $(_this).parent().find('.close').addClass('show');
                $(_this).parent().find('.player').addClass('show');
            };
            setTimeout(yanshi,600);
            $('.close').click(function(){
            	$('body').removeClass('hidden');
        		$(this).parent().css({
                	"top": 0+"px"
            	}).removeClass('show');
            	$('.fix_jieshao').removeClass('show');
                $(this).removeClass('show');
                $(this).siblings('.player').removeClass('show');
    		})
            $('.player').click(function(){
                $('.video_box').addClass('show');
                var w = $(document.body).width();
                var h = $(window).height();
                console.log(w);
                console.log(h);
                $('video').css({
                    "width":h,
                    "height":w,   
                });
                $('video').offset({top:0,left:0});
            })
    })
    
</script>
</html>